<template>
  <div class="consultation-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">
        <i class="el-icon-chat-line-round"></i>
        咨询记录
      </h2>
      <p class="page-subtitle">查看您的心理咨询详细记录和咨询内容</p>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-container">
      <div class="section-header">
        <i class="el-icon-search"></i>
        <span>筛选条件</span>
      </div>
      <el-form :inline="true" :model="queryParams" class="filter-form">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="咨询老师">
              <el-select v-model="queryParams.teacherId" placeholder="请选择老师" style="width: 100%" clearable @change="handleQuery">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="teacher in teachers" :key="teacher.id" :label="teacher.name" :value="teacher.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          
          <el-col :span="5">
            <el-form-item label="咨询状态">
              <el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 100%" clearable @change="handleQuery">
                <el-option label="全部" value=""></el-option>
                <el-option label="进行中" value="ongoing"></el-option>
                <el-option label="已完成" value="completed"></el-option>
                <el-option label="已暂停" value="paused"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          
          <el-col :span="5">
            <el-form-item label="咨询方式">
              <el-select v-model="queryParams.consultationType" placeholder="请选择方式" style="width: 100%" clearable @change="handleQuery">
                <el-option label="全部" value=""></el-option>
                <el-option label="电话咨询" value="phone"></el-option>
                <el-option label="视频咨询" value="video"></el-option>
                <el-option label="面对面咨询" value="offline"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          
          <el-col :span="6">
            <el-form-item label="咨询时间">
              <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%" value-format="yyyy-MM-dd" @change="handleQuery"></el-date-picker>
            </el-form-item>
          </el-col>
          
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
              <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-container">
      <div class="stat-card total">
        <div class="stat-icon">
          <i class="el-icon-data-line"></i>
        </div>
        <div class="stat-content">
          <h3>{{ statistics.total }}</h3>
          <p>总咨询次数</p>
        </div>
      </div>
      
      <div class="stat-card completed">
        <div class="stat-icon">
          <i class="el-icon-circle-check"></i>
        </div>
        <div class="stat-content">
          <h3>{{ statistics.completed }}</h3>
          <p>已完成</p>
        </div>
      </div>
      
      <div class="stat-card ongoing">
        <div class="stat-icon">
          <i class="el-icon-loading"></i>
        </div>
        <div class="stat-content">
          <h3>{{ statistics.ongoing }}</h3>
          <p>进行中</p>
        </div>
      </div>
      
      <div class="stat-card duration">
        <div class="stat-icon">
          <i class="el-icon-time"></i>
        </div>
        <div class="stat-content">
          <h3>{{ statistics.totalDuration }}</h3>
          <p>总咨询时长(小时)</p>
        </div>
      </div>
    </div>

    <!-- 咨询记录列表 -->
    <div class="records-container">
      <div class="section-header">
        <i class="el-icon-document-copy"></i>
        <span>咨询记录详情</span>
        <div class="header-actions">
          <el-button type="text" @click="refreshData">
            <i class="el-icon-refresh"></i>
            刷新
          </el-button>
          <el-button type="text" @click="exportData">
            <i class="el-icon-download"></i>
            导出
          </el-button>
        </div>
      </div>

      <div v-loading="loading" class="records-list">
        <div v-for="record in filteredRecords" :key="record.id" class="consultation-card" :class="getConsultationCardClass(record.status)">
          <!-- 咨询头部信息 -->
          <div class="consultation-header">
            <div class="header-left">
              <div class="session-info">
                <h3 class="session-title">
                  <i class="el-icon-user"></i>
                  第{{ record.sessionNumber }}次咨询 - {{ record.teacherName }}老师
                </h3>
                <div class="session-meta">
                  <span class="session-date">{{ record.consultationDate }} {{ record.timeSlot }}</span>
                  <span class="session-duration">时长：{{ record.duration }}分钟</span>
                </div>
              </div>
            </div>
            <div class="header-right">
              <el-tag :type="getStatusTagType(record.status)" size="medium">
                {{ getStatusText(record.status) }}
              </el-tag>
              <div class="consultation-type">
                <i :class="getConsultationIcon(record.consultationType)"></i>
                {{ record.consultationMethod }}
              </div>
            </div>
          </div>

          <!-- 咨询主要内容 -->
          <div class="consultation-content">
            <!-- 咨询主题 -->
            <div class="content-section">
              <h4 class="content-title">
                <i class="el-icon-document"></i>
                咨询主题
              </h4>
              <p class="content-text">{{ record.consultationTopic }}</p>
            </div>

            <!-- 问题描述 -->
            <div class="content-section">
              <h4 class="content-title">
                <i class="el-icon-edit-outline"></i>
                问题描述
              </h4>
              <p class="content-text">{{ record.problemDescription }}</p>
            </div>

            <!-- 咨询过程记录 -->
            <div class="content-section" v-if="record.consultationProcess">
              <h4 class="content-title">
                <i class="el-icon-chat-line-round"></i>
                咨询过程记录
              </h4>
              <div class="process-content">
                <p class="content-text">{{ record.consultationProcess }}</p>
              </div>
            </div>

            <!-- 咨询师建议 -->
            <div class="content-section suggestion-section" v-if="record.suggestions">
              <div class="suggestion-header">
                <h4 class="content-title">
                  <i class="el-icon-light-bulb"></i>
                  咨询师建议
                </h4>
              </div>
              <div class="suggestion-content">
                <p class="content-text">{{ record.suggestions }}</p>
              </div>
            </div>

            <!-- 下次预约建议 -->
            <div class="content-section" v-if="record.nextAppointmentSuggestion">
              <h4 class="content-title">
                <i class="el-icon-calendar"></i>
                下次预约建议
              </h4>
              <p class="content-text">{{ record.nextAppointmentSuggestion }}</p>
            </div>

            <!-- 效果评估 -->
            <div class="content-section" v-if="record.effectEvaluation">
              <h4 class="content-title">
                <i class="el-icon-star-on"></i>
                效果评估
              </h4>
              <div class="evaluation-content">
                <div class="rating-section">
                  <span class="rating-label">咨询满意度：</span>
                  <el-rate :value="record.satisfactionRating" disabled :colors="['#f7ba2a', '#f7ba2a', '#f7ba2a']"></el-rate>
                  <span class="rating-text">({{ record.satisfactionRating }}/5)</span>
                </div>
                <p class="content-text">{{ record.effectEvaluation }}</p>
              </div>
            </div>
          </div>

          <!-- 咨询操作 -->
          <div class="consultation-actions">
            <el-button type="primary" size="small" plain @click="viewFullRecord(record)">
              <i class="el-icon-view"></i>
              查看完整记录
            </el-button>
            
            <el-button v-if="record.status === 'ongoing'" type="success" size="small" plain @click="continueConsultation(record)">
              <i class="el-icon-right"></i>
              继续咨询
            </el-button>
            
            <el-button type="info" size="small" plain @click="downloadRecord(record)">
              <i class="el-icon-download"></i>
              下载记录
            </el-button>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="!loading && filteredRecords.length === 0" class="empty-state">
        <i class="el-icon-document-delete"></i>
        <h3>暂无咨询记录</h3>
        <p>您还没有任何咨询记录，快去预约心理咨询吧！</p>
        <el-button type="primary" @click="goToBooking">立即预约</el-button>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-container" v-if="total > 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ConsultationList',
  data() {
    return {
      loading: false,
      queryParams: {
        teacherId: '',
        status: '',
        consultationType: '',
        pageNum: 1,
        pageSize: 10
      },
      dateRange: [],
      teachers: [],
      statistics: {
        total: 0,
        completed: 0,
        ongoing: 0,
        totalDuration: 0
      },
      consultationRecords: [],
      total: 0
    }
  },
  
  computed: {
    filteredRecords() {
      let filtered = [...this.consultationRecords]
      if (this.queryParams.teacherId) {
        filtered = filtered.filter(record => record.teacherId == this.queryParams.teacherId)
      }
      if (this.queryParams.status) {
        filtered = filtered.filter(record => record.status === this.queryParams.status)
      }
      if (this.queryParams.consultationType) {
        filtered = filtered.filter(record => record.consultationType === this.queryParams.consultationType)
      }
      if (this.dateRange && this.dateRange.length === 2) {
        const [startDate, endDate] = this.dateRange
        filtered = filtered.filter(record => {
          return record.consultationDate >= startDate && record.consultationDate <= endDate
        })
      }
      return filtered
    }
  },
  
  async mounted() {
    console.log('咨询记录页面初始化中...')
    await this.loadData()
    console.log('咨询记录页面初始化完成！')
  },
  
  methods: {
    async loadData() {
      this.loading = true
      try {
        await Promise.all([
          this.loadTeachers(),
          this.loadConsultationRecords(),
          this.loadStatistics()
        ])
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$message.error('加载数据失败，请重试')
      } finally {
        this.loading = false
      }
    },
    
    async loadTeachers() {
      await new Promise(resolve => setTimeout(resolve, 300))
      this.teachers = [
        { id: 1, name: '张心怡教授' },
        { id: 2, name: '李明华老师' },
        { id: 3, name: '王雅琴老师' },
        { id: 4, name: '陈建国老师' }
      ]
      console.log('加载了', this.teachers.length, '位老师信息')
    },
    
    async loadConsultationRecords() {
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.consultationRecords = this.generateMockRecords()
      this.total = this.consultationRecords.length
      console.log('加载了', this.consultationRecords.length, '条咨询记录')
    },
    
    async loadStatistics() {
      const stats = { total: 0, completed: 0, ongoing: 0, totalDuration: 0 }
      this.consultationRecords.forEach(record => {
        stats.total++
        if (record.status === 'completed') stats.completed++
        else if (record.status === 'ongoing') stats.ongoing++
        stats.totalDuration += record.duration || 0
      })
      stats.totalDuration = Math.round(stats.totalDuration / 60 * 10) / 10
      this.statistics = stats
      console.log('统计数据:', this.statistics)
    },
    
    generateMockRecords() {
      const mockRecords = []
      const teachers = [
        { id: 1, name: '张心怡' },
        { id: 2, name: '李明华' },
        { id: 3, name: '王雅琴' },
        { id: 4, name: '陈建国' }
      ]
      
      const consultationMethods = [
        { type: 'phone', name: '电话咨询' },
        { type: 'video', name: '视频咨询' },
        { type: 'offline', name: '面对面咨询' }
      ]
      
      const statuses = ['ongoing', 'completed', 'paused']
      const topics = ['学习压力与时间管理', '人际关系困扰', '情绪调节与压力缓解', '职业规划与人生目标', '家庭关系与沟通问题', '恋爱关系与情感困扰', '自我认知与自信建立', '睡眠质量与生活节奏']
      const problems = ['最近学习压力很大，经常感到焦虑，晚上睡不好觉，白天注意力难以集中。', '在与同学相处时总是感到紧张，害怕说错话，导致很少主动与人交流。', '情绪波动比较大，有时会因为小事情而感到很沮丧，持续时间较长。', '对未来的职业规划感到迷茫，不知道自己真正想要什么，缺乏明确目标。']
      
      for (let i = 1; i <= 12; i++) {
        const teacher = teachers[Math.floor(Math.random() * teachers.length)]
        const consultation = consultationMethods[Math.floor(Math.random() * consultationMethods.length)]
        const status = statuses[Math.floor(Math.random() * statuses.length)]
        const topic = topics[Math.floor(Math.random() * topics.length)]
        const problem = problems[Math.floor(Math.random() * problems.length)]
        
        const date = new Date()
        date.setDate(date.getDate() - Math.floor(Math.random() * 60))
        const consultationDate = date.toISOString().split('T')[0]
        
        const timeSlots = ['09:00-10:00', '10:30-11:30', '14:00-15:00', '15:30-16:30', '19:00-20:00']
        const timeSlot = timeSlots[Math.floor(Math.random() * timeSlots.length)]
        const duration = 45 + Math.floor(Math.random() * 46)
        
        mockRecords.push({
          id: i,
          sessionNumber: i,
          teacherId: teacher.id,
          teacherName: teacher.name,
          consultationDate,
          timeSlot,
          duration,
          consultationType: consultation.type,
          consultationMethod: consultation.name,
          consultationTopic: topic,
          problemDescription: problem,
          consultationProcess: '通过深入交流了解来访者的具体困扰，采用认知行为疗法帮助其识别负面思维模式，引导进行认知重构。讨论了具体的应对策略，包括放松技巧和时间管理方法。',
          suggestions: '建议继续练习放松技巧，每天安排固定时间进行深呼吸练习。同时建议建立规律的作息时间，保证充足睡眠。可以尝试记录情绪日记，提高自我觉察能力。',
          nextAppointmentSuggestion: status === 'ongoing' ? '建议2周后复诊，继续跟进情绪调节训练的效果，讨论实际应用中遇到的困难。' : null,
          effectEvaluation: status === 'completed' ? '通过本次咨询，来访者对自己的情绪模式有了更清晰的认识，学会了实用的放松技巧，焦虑症状有明显缓解。表示会继续练习所学方法。' : null,
          satisfactionRating: status === 'completed' ? (3 + Math.floor(Math.random() * 3)) : null,
          status,
          createdAt: new Date(date.getTime() - Math.random() * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
        })
      }
      
      return mockRecords.sort((a, b) => new Date(b.consultationDate) - new Date(a.consultationDate))
    },
    
    getStatusTagType(status) {
      const typeMap = { 'ongoing': 'primary', 'completed': 'success', 'paused': 'warning' }
      return typeMap[status] || 'info'
    },
    
    getStatusText(status) {
      const textMap = { 'ongoing': '进行中', 'completed': '已完成', 'paused': '已暂停' }
      return textMap[status] || '未知'
    },
    
    getConsultationIcon(type) {
      const iconMap = { 'phone': 'el-icon-phone', 'video': 'el-icon-video-camera', 'offline': 'el-icon-user-solid' }
      return iconMap[type] || 'el-icon-service'
    },
    
    getConsultationCardClass(status) {
      return `status-${status}`
    },
    
    handleQuery() {
      console.log('执行查询:', this.queryParams, this.dateRange)
      this.loadStatistics()
    },
    
    resetQuery() {
      this.queryParams = { teacherId: '', status: '', consultationType: '', pageNum: 1, pageSize: 10 }
      this.dateRange = []
      this.handleQuery()
    },
    
    async refreshData() {
      this.$message.info('正在刷新数据...')
      await this.loadData()
      this.$message.success('数据刷新成功')
    },
    
    exportData() {
      this.$message.info('导出功能开发中...')
    },
    
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.handleQuery()
    },
    
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.handleQuery()
    },
    
    viewFullRecord(record) {
      const details = `咨询记录详情：\n\n咨询主题：${record.consultationTopic}\n\n问题描述：${record.problemDescription}\n\n咨询过程：${record.consultationProcess}\n\n咨询师建议：${record.suggestions}\n\n${record.effectEvaluation ? '效果评估：' + record.effectEvaluation : ''}`
      this.$alert(details, '完整咨询记录', { confirmButtonText: '确定', type: 'info' })
    },
    
    continueConsultation(record) {
      this.$message.success(`正在为您安排与${record.teacherName}老师的后续咨询`)
    },
    
    downloadRecord(record) {
      this.$message.info('正在生成咨询记录PDF，请稍候...')
    },
    
    goToBooking() {
      this.$router.push('/information/calendar')
    }
  }
}
</script>

<style scoped>
.consultation-container {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 84px);
}

/* 页面头部 */
.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-title i {
  margin-right: 12px;
  color: #409EFF;
}

.page-subtitle {
  font-size: 16px;
  color: #606266;
  margin: 0;
}

/* 筛选区域 */
.filter-container {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
  position: relative;
}

.section-header i {
  font-size: 18px;
  color: #409EFF;
  margin-right: 8px;
}

.section-header span {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  letter-spacing: 0.5px;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.section-header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  border-radius: 1px;
}

/* 统计卡片 */
.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.stat-card .stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  color: white;
}

.stat-card.total .stat-icon {
  background: linear-gradient(45deg, #909399, #b1b3b8);
}

.stat-card.completed .stat-icon {
  background: linear-gradient(45deg, #67c23a, #85ce61);
}

.stat-card.ongoing .stat-icon {
  background: linear-gradient(45deg, #409EFF, #36a3f7);
}

.stat-card.duration .stat-icon {
  background: linear-gradient(45deg, #e6a23c, #f7ba2a);
}

.stat-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 4px 0;
}

.stat-content p {
  font-size: 14px;
  color: #606266;
  margin: 0;
}

/* 记录容器 */
.records-container {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 24px;
}

/* 咨询卡片 */
.records-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.consultation-card {
  background: white;
  border-radius: 12px;
  border: 2px solid #e4e7ed;
  padding: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.consultation-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #e4e7ed;
  transition: all 0.3s ease;
}

.consultation-card.status-ongoing::before {
  background: #409EFF;
}

.consultation-card.status-completed::before {
  background: #67c23a;
}

.consultation-card.status-paused::before {
  background: #e6a23c;
}

.consultation-card:hover {
  border-color: #409EFF;
  box-shadow: 0 6px 24px rgba(64, 158, 255, 0.2);
  transform: translateY(-3px);
}

/* 咨询头部 */
.consultation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.session-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.session-title i {
  margin-right: 8px;
  color: #409EFF;
}

.session-meta {
  display: flex;
  gap: 16px;
}

.session-date,
.session-duration {
  font-size: 13px;
  color: #909399;
}

.session-duration {
  font-weight: 600;
  color: #606266;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.consultation-type {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #606266;
}

.consultation-type i {
  margin-right: 4px;
  color: #409EFF;
}

/* 咨询内容 */
.consultation-content {
  margin-bottom: 20px;
}

.content-section {
  margin-bottom: 20px;
}

.content-title {
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}

.content-title i {
  margin-right: 8px;
  color: #409EFF;
  font-size: 16px;
}

.content-text {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin: 0;
  text-align: justify;
  text-indent: 2em;
}

/* 建议部分样式规范 */
.suggestion-section {
  background: linear-gradient(145deg, #f0f8ff 0%, #e6f3ff 100%);
  border: 1px solid #d9ecff;
  border-radius: 8px;
  padding: 16px;
  position: relative;
}

.suggestion-header {
  background: linear-gradient(90deg, #409EFF, #36a3f7);
  color: white;
  padding: 8px 12px;
  border-radius: 6px 6px 0 0;
  margin: -16px -16px 12px -16px;
}

.suggestion-header .content-title {
  color: white;
  margin: 0;
}

.suggestion-header .content-title i {
  color: white;
}

.suggestion-content {
  background: rgba(255, 255, 255, 0.8);
  border-left: 4px solid #409EFF;
  padding: 12px;
  border-radius: 4px;
}

.suggestion-content .content-text {
  color: #2c3e50;
  text-align: justify;
  text-indent: 2em;
}

/* 效果评估 */
.evaluation-content {
  background: #f9f9f9;
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid #67c23a;
}

.rating-section {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.rating-label {
  font-size: 14px;
  color: #606266;
  margin-right: 8px;
}

.rating-text {
  font-size: 13px;
  color: #909399;
  margin-left: 8px;
}

/* 咨询操作 */
.consultation-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
}

.empty-state i {
  font-size: 64px;
  color: #d3d4d6;
  margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 18px;
  color: #606266;
  margin: 0 0 8px 0;
}

.empty-state p {
  font-size: 14px;
  margin: 0 0 24px 0;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .consultation-container {
    padding: 16px;
  }
  
  .stats-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .consultation-header {
    flex-direction: column;
    gap: 12px;
  }
  
  .header-right {
    align-items: flex-start;
  }
  
  .consultation-actions {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .stats-container {
    grid-template-columns: 1fr;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .consultation-card {
    padding: 16px;
  }
  
  .session-meta {
    flex-direction: column;
    gap: 4px;
  }
}
</style>